<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>酒店详情 - 携程旅行网</title>

  <!-- 样式 -->
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/h-detail.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
</head>

<body>
  <!-- 顶部导航 -->
  <header class="ctrip-header">
    <div class="container">
      <div class="header-top">
        <div class="logo">
          <a href="#"><img src="picture/logo.png" alt="携程旅行网" /></a>
        </div>
        <div class="nav-main">
          <ul>
            <li><a href="#" class="active"><i class="fas fa-hotel"></i> 酒店</a></li>
            <li><a href="flight.html"><i class="fas fa-plane"></i> 机票</a></li>
            <li><a href="#"><i class="fas fa-train"></i> 火车票</a></li>
            <li><a href="#"><i class="fas fa-ship"></i> 旅游</a></li>
            <li><a href="#"><i class="fas fa-car"></i> 租车</a></li>
            <li><a href="#"><i class="fas fa-utensils"></i> 美食</a></li>
            <li><a href="#"><i class="fas fa-gift"></i> 团购</a></li>
          </ul>
        </div>
        <div class="user-area">
          <a href="#" class="login">登录/注册</a>
          <a href="#" class="app-download">下载携程APP</a>
        </div>
      </div>
    </div>
  </header>

  <!-- 轮播图 -->
  <section class="hotel-gallery">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="picture/hotel1.jpg" /></div>
        <div class="swiper-slide"><img src="picture/hotel2.jpg" /></div>
        <div class="swiper-slide"><img src="picture/hotel3.jpg" /></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </section>

  <!-- 酒店信息 -->
  <main class="hotel-detail-container">
    <h2>北京国际大酒店</h2>
    <p class="location"><i class="fas fa-map-marker-alt"></i> 北京市东城区建国门内大街9号</p>
    <p class="stars">⭐⭐⭐⭐⭐</p>
    <p class="price">￥688 起/晚</p>
    <p class="description">地处北京市中心，交通便利，靠近故宫、天安门、王府井步行街等景点，适合商务与旅游出行。</p>

    <!-- 预订信息 -->
    <section class="booking-section">
      <h3>预订信息</h3>
      <div class="booking-form">
        <label>入住日期</label>
        <input type="text" id="checkin" class="checkin-date" placeholder="选择入住日期" readonly />

        <label>离店日期</label>
        <input type="text" id="checkout" class="checkout-date" placeholder="选择离店日期" readonly />

        <label>选择房型</label>
        <select>
          <option value="">请选择房型</option>
          <option>高级大床房</option>
          <option>豪华双床房</option>
        </select>

        <button class="book-btn">立即预订</button>
      </div>
    </section>

    <!-- 房型 -->
    <section class="room-types">
      <h3>可选房型</h3>
      <div class="room">
        <div class="room-info">
          <h4>高级大床房</h4>
          <p>包含早餐 | 可住2人 | 免费WiFi</p>
        </div>
        <div class="room-price">￥688 <a href="#" class="book-btn">预订</a></div>
      </div>
      <div class="room">
        <div class="room-info">
          <h4>豪华双床房</h4>
          <p>含双早 | 可住3人 | 免费取消</p>
        </div>
        <div class="room-price">￥788 <a href="#" class="book-btn">预订</a></div>
      </div>
    </section>

    <!-- 评论 -->
    <section class="review-summary">
      <h3>综合评分</h3>
      <p class="score">4.8 / 5</p>
      <p>位置：4.9　卫生：4.7　服务：4.8</p>
    </section>

    <section class="reviews">
      <h3>用户评价</h3>
      <div class="review">
        <p class="username">小李</p>
        <p class="comment">环境好，地理位置优越，前台服务很贴心！</p>
        <p class="rating">评分：⭐⭐⭐⭐⭐</p>
      </div>
      <div class="review">
        <p class="username">游客A</p>
        <p class="comment">整体不错，早餐很丰富，就是晚上隔音稍差。</p>
        <p class="rating">评分：⭐⭐⭐⭐</p>
      </div>
    </section>

    <!-- 地图 -->
    <section class="map-section">
      <h3>位置地图</h3>
      <div class="map-container">
        <iframe src="https://ditu.amap.com" width="100%" height="300" style="border:0;" allowfullscreen=""
          loading="lazy"></iframe>
      </div>
    </section>

    <!-- 推荐酒店 -->
    <section class="recommend">
      <h3>相关推荐</h3>
      <div class="recommend-hotels">
        <div class="recommend-item">
          <img src="picture/hotel2.jpg" alt="推荐1" />
          <p>王府井丽晶酒店</p>
          <span>￥899 起</span>
        </div>
        <div class="recommend-item">
          <img src="picture/hotel3.jpg" alt="推荐2" />
          <p>首都大酒店</p>
          <span>￥788 起</span>
        </div>
      </div>
    </section>
  </main>

  <!-- 插件 -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>

  <!-- 初始化逻辑 -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // Swiper 初始化
      new Swiper('.swiper-container', {
        loop: true,
        pagination: { el: '.swiper-pagination' }
      });

      // Flatpickr 日期选择器
      const checkInInput = document.getElementById('checkin');
      const checkOutInput = document.getElementById('checkout');

      const checkOutPicker = flatpickr(checkOutInput, {
        locale: 'zh',
        dateFormat: 'Y-m-d',
        minDate: new Date().fp_incr(1)
      });

      flatpickr(checkInInput, {
        locale: 'zh',
        dateFormat: 'Y-m-d',
        minDate: 'today',
        onChange: function (selectedDates, dateStr) {
          checkOutPicker.set('minDate', dateStr);
          const nextDay = new Date(selectedDates[0]);
          nextDay.setDate(nextDay.getDate() + 1);
          checkOutPicker.setDate(nextDay);
        }
      });
    });
  </script>
</body>

</html>